.btn {
  position: relative;
  display: block;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  font-size: $btnFontSize;
  line-height: strip-units($btnHeight) / strip-units($btnFontSize);
  border: 1px solid $btnBorderColor;
  border-radius: $btnBorderRadius;
  background-color: #fff;
  padding-left: 15px;
  padding-right: 15px;
  cursor: pointer;
  color: $colorPrimary;
  &.lg {
    font-size: $btnFontSizeLg;
    line-height: strip-units($btnHeightLg) / strip-units($btnFontSizeLg);
  }
  &.sm {
    font-size: $btnFontSizeSm;
    line-height: strip-units($btnHeightSm) / strip-units($btnFontSizeSm);
  }
  &.btn-fill {
    color: #fff;
  }
  &.disabled,
  &:disabled {
    opacity: .6;
  }
}

button, input {
  &.btn {
    width: 100%;
    outline: none;
    @include appearance();
    &:focus {
      outline: none;
    }
    &.btn-inline {
      width: auto;
    }
  }
}

@mixin btn-create($name,$borderColor,$bgColor:$borderColor) {
  .#{$name} {
    border-color: $borderColor;
    color: $borderColor;
    background-color: transparent;
    &.btn-fill {
      background-color: $bgColor;
      &:hover,
      &:active {
        background-color: darken($bgColor, 3%);
      }
    }
  }
}

@include btn-create('btn-primary', $colorPrimary);
@include btn-create('btn-Secondary', $colorSecondary);

.btn-group {
  margin: $gapSize 0;
  @include table-row($gapSize 0);
}
